<template>
	<el-dialog class="abow-dialog" :visible.sync="visible"
		:title="!userId ? '新增' : '修改'" :close-on-click-modal="false"
		:close-on-press-escape="false" width="650px">
		<el-form class="form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="150px" size="medium" :inline="false"
			labelSuffix="：">
			<el-form-item prop="name" label="公司名称">
				<el-input clearable v-model="dataForm.name" placeholder="公司名称" />
			</el-form-item>
			<el-form-item prop="applet_name" label="公司绑定的小程序名称">
				<el-input clearable v-model="dataForm.applet_name" placeholder="公司绑定的小程序名称" />
			</el-form-item>
			<el-form-item prop="name" label="公司名称">
				<el-input clearable v-model="dataForm.name" placeholder="公司名称" />
			</el-form-item>
			<el-form-item prop="status" label="状态">
				<el-select clearable v-model="dataForm.status" placeholder="请选择">
					<el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item prop="is_external" label="是否为外部用户">
				<el-radio-group v-model="dataForm.is_external">
					<el-radio :label="0">否</el-radio>
					<el-radio :label="1">是</el-radio>
				</el-radio-group>
			</el-form-item> -->
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('views.public.confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	import {
		isEmail,
		isMobile
	} from '@/libs/validate'
	import schema from 'async-validator'
	export default {
		data() {
			return {
				userId:null,
				status:[
				{
					value:0,
					label:'禁用',
				},
				{
					value:1,
					label:'正常',
				}],
				visible: false,
				deptList: [],
				deptListVisible: false,
				fullscreenLoading: false,
				roleList: [],
				roleIdListDefault: [],
				dataForm: {
					name: '', //名称
					status: null, //状态
					// is_external: '', //是否为外部用户
				}
			}
		},
		created() {},
		computed: {
			dataRule() {
				return {
					name: [{
							required: true,
							message: '名称不能为空!',
							trigger: ['blur','change']
						}
					],
					status: [{
						required: true,
						message: '状态不能为空!',
						trigger: ['blur','change']
					}],
					is_external: [{
						required: true,
						message: '排序不能为空！',
						trigger: ['blur','change']
					}]
				}
			}
		},
		methods: {
			init() {
				this.visible = true;
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
				})
			},
			update(row) {
				this.visible = true
				this.$nextTick(() => {
					this.dataForm = Object.assign({}, row)
					this.dataForm.comPassword = row.password
					this.$refs.dataForm.clearValidate()
				})
			},

			// 所属部门树, 选中
			deptListTreeCurrentChangeHandle(data, node) {
				this.dataForm.deptId = data.deptId
				this.dataForm.deptName = data.name
				this.deptListVisible = false
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				console.log('表单提交');
				this.$refs.dataForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
					console.log(this.dataForm);
					this.$axios.post(this.userId?`/api/playlet/company/update/${this.userId}`:'/api/playlet/company/create', this.dataForm).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.visible = false;
								this.$emit('refreshDataList');
							}
						})
					}).catch(() => {})
				})
			}, 1000, {
				leading: true,
				trailing: false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 540px;
	}
	.mod-sys__user {
		.dept-list {

			.el-input__inner,
			.el-input__suffix {
				cursor: pointer;
			}
		}

		.role-list {
			.el-select {
				width: 100%;
			}
		}
	}
</style>